<script setup lang="ts">
import type { SearchFormItemType } from '@/pages/table-diagraming/types'

interface IProps {
  item: SearchFormItemType
}

defineProps<IProps>()

interface IEmits {
  (e: 'deleteItem', index: number): void
}
const emits = defineEmits<IEmits>()
</script>

<template>
  <div class="custom-input">
    <div class="inner">
      <div class="show-box">
        <span v-if="item.type === 'date'" class="mr-2 flex items-center">
          <el-icon><Calendar /></el-icon>
        </span>
        {{ item.placeholder }}
        <span v-if="item.type === 'select'" class="ml-2 flex items-center">
          <el-icon><ArrowDownBold /></el-icon>
        </span>
      </div>

      <div class="setting-box">
        <span class="font-bold">[{{ item.name }}]</span>-点击设置属性<el-icon
          @click.stop="() => emits('deleteItem', 1)"
          class="delete-icon"
          ><CircleClose
        /></el-icon>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.custom-input {
  position: relative;
  width: 100%;
  height: 100%;
  color: #1d2129;
  font-size: 14px;
  background-color: #f2f3f5;
  box-sizing: border-box;
  padding-left: 12px;
  cursor: pointer;
  overflow: hidden;
  .inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s linear;
    .setting-box,
    .show-box {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    &:hover {
      transform: translateY(-30px);
    }
  }

  &:hover {
    background-color: #e5e6eb;
  }
  .delete-icon {
    position: absolute;
    right: 10px;
  }
}
</style>
